<template>
  <div class="app-container">
    <div>
      <el-button type="primary" @click="addFN">新建培训 </el-button>
      <br />
      <br />

      <el-form :inline="true">
        <el-form-item label="培训名称">
          <el-input
            v-model.trim="queryParams.trainName"
            placeholder="请输入培训名称"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="所属项目">
          <el-select v-model="queryParams.projectId">
            <el-option
              v-for="item in dropDownList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              clearable
            />
          </el-select>
        </el-form-item>
        <el-form-item label="发布状态">
          <el-select v-model="queryParams.status">
            <el-option label="未发布" value="0" />
            <el-option label="已发布" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="培训时间">
          <el-date-picker
            v-model="queryParams.trainTimeRange"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="报名时间" prop="signTimeRange">
          <el-date-picker
            v-model="queryParams.enrollTimeRange"
            type="datetimerange"
            value-format="YYYY-MM-DD HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button type="warning" plain icon="Download" @click="handleExport"
            >导出</el-button
          >
          <el-button type="info" plain icon="RefreshRight" @click="Refresh"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 表格数据 -->
      <el-table v-loading="loading" :data="List" @sort-change="sortChange">
        <!-- <el-table-column type="index" /> -->
        <el-table-column
          label="序号"
          width="50"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column
          label="培训名称"
          min-width="100"
          prop="trainName"
          align="center"
        ></el-table-column>
        <el-table-column
          label="所属项目"
          min-width="100"
          prop="project"
          align="center"
        ></el-table-column>
        <el-table-column
          label="报名时间"
          min-width="300"
          prop="enrollTimeStr"
          align="center"
          :sortable="'custom'"
        ></el-table-column>
        <el-table-column
          label="培训时间"
          min-width="300"
          prop="trainTimeStr"
          align="center"
          :sortable="'custom'"
        ></el-table-column>
        <el-table-column
          label="培训项目"
          prop="trainProject"
          min-width="100"
          align="center"
        >
          <template #default="scope">
            <el-button
              @click="trainingItemFN(scope.row)"
              type="text"
              v-if="scope.row.releaseStatus != 1"
              >去完善</el-button
            >
            <el-icon v-if="scope.row.releaseStatus == 1"><Check /></el-icon>
          </template>
        </el-table-column>
        <el-table-column
          label="培训费用"
          min-width="120"
          prop="trainCost"
          align="center"
        >
          <template #default="scope">
            <el-button
              @click="trainCostFN(scope.row)"
              type="text"
              v-if="scope.row.releaseStatus != 1"
              >去完善</el-button
            >
            <el-icon v-if="scope.row.releaseStatus == 1"><Check /></el-icon>
          </template>
        </el-table-column>
        <el-table-column
          label="日程"
          min-width="100"
          prop="trainEndTime"
          align="center"
        >
          <template #default="scope">
            <el-button
              type="text"
              @click="trainScheduleFN(scope.row)"
              v-if="scope.row.releaseStatus != 1"
              >去完善</el-button
            >
            <el-icon v-if="scope.row.releaseStatus == 1"><Check /></el-icon>
          </template>
        </el-table-column>
        <el-table-column
          label="报名状态"
          width="100"
          prop="enrollStr"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="发布状态"
          min-width="100"
          prop="releaseStr"
          align="center"
        ></el-table-column>
        <el-table-column
          label="操作"
          min-width="280"
          align="center"
          fixed="right"
        >
          <template #default="scope">
            <el-button
              type="text"
              v-if="scope.row.releaseStr == '未发布'"
              @click="UpdateFn(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" @click="DelFN(scope.row)">删除</el-button>
            <el-button
              v-if="scope.row.releaseStr == '未发布'"
              type="text"
              @click="PublishFN(scope.row)"
              >发布</el-button
            >
            <el-button
              v-if="scope.row.releaseStr == '已发布'"
              type="text"
              @click="cancelFN(scope.row)"
              >取消发布</el-button
            >
            <el-button
              v-if="scope.row.orderIndex == 0"
              type="text"
              @click="OverheadFN(scope.row)"
              >置顶</el-button
            >
            <el-button
              v-if="scope.row.orderIndex == 1"
              type="text"
              @click="cancelHeadFN(scope.row)"
              >取消置顶</el-button
            >
            <el-button type="text" @click="DataFN(scope.row)">数据</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script setup name="train">
import { trainList, trainEdit, trainPublish } from "@/api/train/list";
import { getBaseProjectList } from "@/api/oam/basic";
import { getCurrentInstance } from "vue";

import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const { dropDownList } = proxy.useDict("dropDownList");
const List = ref([]);
const total = ref(0);
const loading = ref(false);
const active = ref();
const id = ref();
const projectId = ref();
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    trainName: undefined,
    projectId: undefined,
    trainTimeRange: undefined,
    enrollTimeRange: undefined,
    status: undefined,
    trainOrder: 0,
    signOrder: 0,
  },
  addForm: {},
  form: {
    projectId: "",
    trainId: "",
    trainName: "",
    trainStartTime: "",
    trainEndTime: "",
    enrollStartTime: "",
    enrollEndTime: "",
    venueId: "",
    status: "",
    trainTimeRange: "",
    enrollTimeRange: "",
  },
});
const { addForm, queryParams, form } = toRefs(data);

// 新建培训按钮
function addFN() {
  active.value = 0;
  router.push({
    path: "/train/operation",
  });
}

/** 查询培训列表 */
getList();
function getList() {
  loading.value = true;
  trainList(queryParams.value).then((response) => {
    List.value = response.rows;
    total.value = response.total;
  });
  loading.value = false;
}

// 重置
function Refresh() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    trainName: undefined,
    projectId: undefined,
    trainTimeRange: undefined,
    enrollTimeRange: undefined,
    status: undefined,
    trainOrder: 0,
    signOrder: 0,
  };
  getList();
}
// 搜索按钮
function handleQuery() {
  loading.value = true;
  queryParams.value.pageNum = 1;
  queryParams.value.trainTimeRange
    ? (queryParams.value.trainTimeRange =
        queryParams.value.trainTimeRange.join())
    : "";

  queryParams.value.enrollTimeRange
    ? (queryParams.value.enrollTimeRange =
        queryParams.value.enrollTimeRange.join())
    : "";
  getList();

  queryParams.value.trainTimeRange
    ? (queryParams.value.trainTimeRange =
        queryParams.value.trainTimeRange.split(","))
    : "";

  queryParams.value.enrollTimeRange
    ? (queryParams.value.enrollTimeRange =
        queryParams.value.enrollTimeRange.split(","))
    : "";

  // 表单清空
  // queryParams.value = {
  //   pageNum: 1,
  //   pageSize: 10,
  //   trainName: undefined,
  //   projectId: undefined,
  //   trainTimeRange: undefined,
  //   enrollTimeRange: undefined,
  //   status: undefined,
  //   trainOrder: 0,
  //   signOrder: 0,
  // };
  loading.value = false;
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "/systemj/information/exportTrainManageData",
    {
      ...queryParams.value,
    },
    `reserve_${new Date().getTime()}.xlsx`
  );
}

// 下一步
function xiaFN(n, idx, val) {
  console.log(n, idx, val);
  active.value = n;
  id.value = idx;
  projectId.value = val;
}

// 所属项目下拉框、
dropList();
function dropList() {
  getBaseProjectList().then((response) => {
    dropDownList.value = response.rows;
  });
}

// 编辑
function UpdateFn(row) {
  router.push({
    path: "/train/operation",
    query: {
      id: row.id,
      active: 0,
    },
  });
}

// 删除
function DelFN(row) {
  proxy.$modal
    .confirm('是否确认删除培训名称为"' + row.trainName + '"的数据项？')
    .then(async function () {
      addForm.value.id = row.id;
      console.log(addForm.value);
      await trainEdit(addForm.value);
    })
    .then(async () => {
      await getList();

      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}

// 发布
async function PublishFN(row) {
  addForm.value.id = row.id;
  addForm.value.flag = 2;
  await trainPublish(addForm.value);
  getList();
}

// 取消发布;
async function cancelFN(row) {
  addForm.value.id = row.id;
  addForm.value.flag = 3;
  await trainPublish(addForm.value);
  getList();
}

// 置顶
async function OverheadFN(row) {
  addForm.value.id = row.id;
  addForm.value.flag = 1;
  await trainPublish(addForm.value);
  getList();
}
// 取消置顶
async function cancelHeadFN(row) {
  addForm.value.id = row.id;
  addForm.value.flag = 0;
  await trainPublish(addForm.value);
  getList();
}

// 数据
function DataFN(row) {
  router.push({
    path: "/train/trainData",
    query: {
      id: row.id,
    },
  });
}

// 培训项目
function trainingItemFN(row) {
  router.push({
    path: "/train/operation",
    query: {
      id: row.id,
      active: 1,
      projectId: row.projectId,
    },
  });
}

// 培训费用
function trainCostFN(row) {
  router.push({
    path: "/train/operation",
    query: {
      id: row.id,
      active: 2,
      projectId: row.projectId,
    },
  });
}

// 日程
function trainScheduleFN(row) {
  router.push({
    path: "/train/operation",
    query: {
      id: row.id,
      active: 3,
      projectId: row.projectId,
    },
  });
}

// 降序升序
function sortChange(column) {
  // 升序
  if (column.prop == "trainTimeStr") {
    // console.log(column.prop);
    // 报名
    if (column.order == "ascending") {
      queryParams.value.signOrder = 1;
    } else if (column.order == "descending") {
      queryParams.value.signOrder = 0;
    }
  }

  if (column.prop == "matchTimeStr") {
    // console.log(column.prop);
    // 赛事
    if (column.order == "ascending") {
      queryParams.value.trainOrder = 1;
    } else if (column.order == "descending") {
      queryParams.value.trainOrder = 0;
    }
  }

  getList();
}
</script>

<style scoped>
.tts1 {
  float: left;
  padding: 40px;
  text-align: center;
}
.tts2 {
  float: left;
  padding: 40px;
  text-align: center;
}
</style>
